import "./header.less";
// import "../../assets/styles/all.less";

const trigger = document.querySelector<HTMLImageElement>(".b7 > img");
const inputEl = document.querySelector<HTMLInputElement>(".b7 > input");
const suggestionBox = document.querySelector<HTMLElement>(".b7-1");

if (trigger && inputEl && suggestionBox) {
  trigger.addEventListener("click", (e) => {
    e.stopPropagation();
    const willShow = !inputEl.classList.contains("show");
    inputEl.classList.toggle("show", willShow);
    suggestionBox.classList.toggle("show", willShow);
  });

  document.addEventListener("click", (e) => {
    const target = e.target as Element | null;
    if (!target || !target.closest(".b7")) {
      inputEl.classList.remove("show");
      suggestionBox.classList.remove("show");
    }
  });
}

// 页面滚动位置逻辑
let Onav = document.querySelector("nav") as Element;
let Ogd = document.querySelector(".guding") as Element;
let lastScrollY = window.scrollY;
// 滚动时实时检测
function gdposition() {
  const currentScrollY = window.scrollY;

  if (currentScrollY > 105) {
    if (currentScrollY < lastScrollY) {
      // 向上滚动时显示固定元素
      Ogd.classList.add("gd-fixed");
      Onav.classList.remove("nav-fixed");
    } else {
      // 向下滚动时隐藏固定元素
      Ogd.classList.remove("gd-fixed");
      Onav.classList.add("nav-fixed");
    }
  } else {
    // 回到顶部时移除所有固定样式
    Ogd.classList.remove("gd-fixed");
    Onav.classList.remove("nav-fixed");
  }
  lastScrollY = currentScrollY;
}
//实时监听事件
window.addEventListener("scroll", gdposition);

//下拉菜单逻辑
const Osdcd = document.querySelector(".b2-1") as HTMLElement;
const Ozzcd = document.querySelector(".b3-1") as HTMLElement;
const Ofxcd = document.querySelector(".b4-1") as HTMLElement;
const Oab2 = document.querySelector(".b2") as HTMLElement;
const Oab3 = document.querySelector(".b3") as HTMLElement;
const Oab4 = document.querySelector(".b4") as HTMLElement;

let activeDropdown: HTMLElement | null = null;

function xlcd(a: HTMLElement) {
  // 先隐藏当前活动的下拉菜单
  if (activeDropdown && activeDropdown !== a) {
    rxlcd(activeDropdown);
  }
  a.style.display = "flex";
  setTimeout(() => {
    a.classList.add("xlcd");
  }, 10);
  activeDropdown = a;
}
function rxlcd(a: HTMLElement) {
  a.classList.remove("xlcd");
  setTimeout(() => {
    a.style.display = "none";
  }, 300);
  if (activeDropdown === a) {
    activeDropdown = null;
  }
}

// 第一个下拉菜单
Oab2.addEventListener("mouseenter", () => {
  xlcd(Osdcd);
});
Oab2.addEventListener("mouseleave", (e) => {
  // 检查鼠标是否移动到下拉菜单中
  if (!Osdcd.contains(e.relatedTarget as Node)) {
    rxlcd(Osdcd);
  }
});
Osdcd.addEventListener("mouseleave", (e) => {
  // 检查鼠标是否移动到菜单项中
  if (!Oab2.contains(e.relatedTarget as Node)) {
    rxlcd(Osdcd);
  }
});

// 第二个下拉菜单
Oab3.addEventListener("mouseenter", () => {
  xlcd(Ozzcd);
});
Oab3.addEventListener("mouseleave", (e) => {
  if (!Ozzcd.contains(e.relatedTarget as Node)) {
    rxlcd(Ozzcd);
  }
});
Ozzcd.addEventListener("mouseleave", (e) => {
  if (!Oab3.contains(e.relatedTarget as Node)) {
    rxlcd(Ozzcd);
  }
});

// 第三个下拉菜单
Oab4.addEventListener("mouseenter", () => {
  xlcd(Ofxcd);
});
Oab4.addEventListener("mouseleave", (e) => {
  if (!Ofxcd.contains(e.relatedTarget as Node)) {
    rxlcd(Ofxcd);
  }
});
Ofxcd.addEventListener("mouseleave", (e) => {
  if (!Oab4.contains(e.relatedTarget as Node)) {
    rxlcd(Ofxcd);
  }
});

// 点击页面其他区域关闭所有下拉菜单
document.addEventListener("click", (e) => {
  const target = e.target as HTMLElement;
  if (
    activeDropdown &&
    !activeDropdown.contains(target) &&
    !target.closest(".b2") &&
    !target.closest(".b3") &&
    !target.closest(".b4")
  ) {
    rxlcd(activeDropdown);
  }
});
